<template>
	<view class="merchant root-container">
		<view class="content">
			<view class="form">
				<uv-form ref="formRef" :model="model" :rules="rules" labelWidth="180rpx"
					:labelStyle="{fontSize: '28rpx'}">
					<uv-form-item label="联系人" prop="contacts" borderBottom required>
						<uv-input v-model="model.contacts" border="none" placeholder="请输入联系人" />
						<template v-slot:right>
							<uv-icon name="arrow-right" />
						</template>
					</uv-form-item>
					<uv-form-item label="联系电话" prop="contacts_tel" borderBottom required>
						<uv-input v-model="model.contacts_tel" border="none" placeholder="请输入联系电话" />
						<template v-slot:right>
							<uv-icon name="arrow-right" />
						</template>
					</uv-form-item>
					<uv-form-item label="商家名称" prop="merchant_name" borderBottom required>
						<uv-input v-model="model.merchant_name" border="none" placeholder="请输入商家名称" />
						<template v-slot:right>
							<uv-icon name="arrow-right" />
						</template>
					</uv-form-item>
					<uv-form-item label="商家分类" prop="merchant_classify" borderBottom required
						@click="showClassifSelect">
						<uv-input v-model="merchant_classify" border="none" placeholder="请输入商家分类" readonly />
						<template v-slot:right>
							<uv-icon name="arrow-right" />
						</template>
					</uv-form-item>
					<uv-form-item label="商家地址" prop="merchant_address" borderBottom required>
						<uv-input v-model="model.merchant_address" border="none" placeholder="请输入商家地址" />
						<template v-slot:right>
							<uv-icon name="arrow-right" />
						</template>
					</uv-form-item>
					<uv-form-item label="商家简介" prop="merchant_profile" borderBottom required>
						<uv-input v-model="model.merchant_profile" border="none" placeholder="请输入商家简介" />
						<template v-slot:right>
							<uv-icon name="arrow-right" />
						</template>
					</uv-form-item>
					<uv-form-item label="是否邻事联盟" prop="is_consular_alliance" borderBottom required>
						<uv-radio-group v-model="model.is_consular_alliance" activeColor="#D32D26">
							<uv-radio label="是" :name="1" :customStyle="{margin: '8px'}" />
							<uv-radio label="否" :name="0" :customStyle="{margin: '8px'}" />
						</uv-radio-group>
						<template v-slot:right>
							<uv-icon name="arrow-right" />
						</template>
					</uv-form-item>
				</uv-form>
			</view>
		</view>

		<view class="content" style="padding-top: 0;">
			<view class="form1">
				<uv-text prefixIcon="*" text="证件照片" bold color="#333" size="30rpx" iconStyle="color: #E47470" />
				<uv-row gutter="30rpx" customStyle="flex-wrap: wrap">
					<uv-col span="6">
						<view class="item">
							<lst-upimg :type="4" @success="e => upimgSuccess(e, 'logo')" :list="model.brand_logo"
								name="logo">
								<uv-image
									src='https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/3b656202508161025153863.png'
									height="60" mode="aspectFit" />
								<uv-gap height="8" bgColor="transparent" />
								<uv-text text="品牌LOGO" color="#333" size="24rpx" align="center" />
							</lst-upimg>
						</view>
					</uv-col>
					<uv-col span="6">
						<view class="item">
							<lst-upimg :type="4" @success="e => upimgSuccess(e, '背景图')"
								:list="model.merchant_background_img" name="背景图">
								<uv-image
									src='https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/3b656202508161025153863.png'
									height="60" mode="aspectFit" />
								<uv-gap height="8" bgColor="transparent" />
								<uv-text text="商家背景图" color="#333" size="24rpx" align="center" />
							</lst-upimg>
						</view>
					</uv-col>
					<uv-col span="6">
						<view class="item">
							<lst-upimg :type="4" @success="e => upimgSuccess(e, '证件')"
								:list="model.business_license_url" name="证件">
								<uv-image
									src='https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/3b656202508161025153863.png'
									height="60" mode="aspectFit" />
								<uv-gap height="8" bgColor="transparent" />
								<uv-text text="营业执照/从业资格证" color="#333" size="24rpx" align="center" />
							</lst-upimg>
						</view>
					</uv-col>
				</uv-row>
			</view>
		</view>

		<view class="content" style="padding-top: 0;">
			<view class="form1 flex align-center justify-between">
				<uv-text prefixIcon="*" :text="community || '选择小区'" :lines="1" bold color="#333" size="30rpx"
					iconStyle="color: #E47470" />
				<uv-button text="请选择" shape="circle" color="#D32D26" size="mini" @click="open" />
			</view>
		</view>
		<uv-gap height="5" bgColor="transparent" />
		<view class="approved-reason" v-if="approvedStatus==2">当前申请审核未通过，拒绝原因：{{approvedReason}}，请修改后重新提交。</view>
		<view class="form2">
			<view class="btn" @click="submit">{{ buttonText }}</view>
			<uv-gap height="10" bgColor="transparent" />

			<view class="flex align-center justify-center">
				<uv-checkbox-group v-model="checkbox" activeColor="#D32D26" inactiveColor="#D32D26" class="checkbox">
					<uv-checkbox :customStyle="{marginBottom: '8px'}" label="已阅读并同意《邻事通商家注册协议》" :name="1" />
				</uv-checkbox-group>
			</view>
		</view>
		<uv-gap height="5" bgColor="transparent" />

		<uv-picker ref="classifSelect" :columns="classif" keyName="label" @confirm="classifSelectVal"
			confirmColor="#D32D26" />

		<uv-popup ref="citySelectRef" mode="bottom">
			<view class="citySelect">
				<lst-city-select :level="5" :init="citySelectInit" @select="citySelect" />
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		nextTick,
		computed,
		onMounted,
		onUnmounted
	} from 'vue';

	import {
		navigate,
		checkEmptyProperties,
		isEmpty
	} from '@/util/tools.js';

	import {
		joinMerchant,
		joinMerchantDetail,
		getMerchantClassify
	} from '@/api'

	onMounted(() => {
		// 监听事件
		uni.$on('refreshAreaSelect', (data) => {
			community.value = data.select;
			model.community_province_id = data.province_id;
			model.community_city_id = data.city_id;
			model.community_area_id = data.area_id;
			model.community_town_id = data.town_id
			model.community_id = data.community_id
		})
	})

	onUnmounted(() => {
		// 页面卸载时取消监听，避免内存泄漏
		uni.$off('refreshAreaSelect')
	})



	const model = reactive({
		contacts: '',
		contacts_tel: '',
		merchant_name: '',
		merchant_classify: 2,
		merchant_address: '',
		merchant_profile: '',
		is_consular_alliance: 1,
		brand_logo: '',
		merchant_background_img: '',
		business_license_url: '',
		community_province_id: '',
		community_city_id: '',
		community_area_id: '',
		community_town_id: '',
		community_id: ''
	})
	const approvedReason = ref('')
	const approvedStatus = ref(null)
	const buttonText = ref('提交资料')

	const checkbox = ref([])
	const formRef = ref(null)
	const community = ref('')
	const merchant_classify = ref('')
	const classifyName = ref('')
	const classifSelect = ref(null)
	const citySelectRef = ref(null)


	const rules = {
		contacts: {
			type: 'string',
			required: true,
			message: '请填写联系人',
			trigger: ['blur', 'change']
		},
		contacts_tel: {
			type: 'string',
			required: true,
			message: '请填写联系电话',
			trigger: ['blur', 'change']
		},
		merchant_name: {
			type: 'string',
			required: true,
			message: '请填写商家名称',
			trigger: ['blur', 'change']
		},
		merchant_classify: {
			type: 'integer',
			required: true,
			message: '请选择商家分类',
			trigger: ['blur', 'change']
		},
		merchant_address: {
			type: 'string',
			required: true,
			message: '请填写商家地址',
			trigger: ['blur', 'change']
		},
		merchant_profile: {
			type: 'string',
			required: true,
			message: '请填写商家简介',
			trigger: ['blur', 'change']
		}
	}

	const citySelectInit = computed(() => {
		const {
			community_province_id,
			community_city_id,
			community_area_id,
			community_town_id,
			community_id
		} = model
		if (community_province_id && community_city_id && community_area_id && community_town_id && community_id) {
			return [model.community_province_id, model.community_city_id, model.community_area_id, model
				.community_town_id, model.community_id
			]
		} else {
			return []
		}
	})

	const classif = ref([])

	const showClassifSelect = () => {

		classifSelect.value.open()
	}

	const classifSelectVal = (val) => {
		model.merchant_classify = val.value[0].id
		merchant_classify.value = val.value[0].label
	}

	const open = () => {

		let url = '/pages-public/SelectCityArea/SelectCityArea?select_level=5'
		navigate(url)
	}

	// 选择接单社区
	const citySelect = (e) => {
		citySelectRef.value.close()
		if (e) {
			community.value = e.map(e => e.name).join('/')
			model.community_province_id = e[0].id // 接单社区-省id
			model.community_city_id = e[1].id // 接单社区-市id
			model.community_area_id = e[2].id // 接单社区-区县id
			model.community_town_id = e[3].id // 接单社区-乡镇id
			model.community_id = e[4].id // 接单社区-小区id
		}
	}

	// 上传图片
	const upimgSuccess = (fileList, type) => {
		if (type === 'logo') model.brand_logo = fileList.length === 0 ? '' : fileList[0].src
		if (type === '背景图') model.merchant_background_img = fileList.length === 0 ? '' : fileList[0].src
		if (type === '证件') model.business_license_url = fileList.length === 0 ? '' : fileList[0].src
	}

	const setStatus = () => {
		if (isEmpty(approvedStatus.value)) {
			return;
		}
		let status = approvedStatus.value * 1
		switch (status) {
			case 2:
				buttonText.value = '重新提交'
				break;
			default:
				buttonText.value = '提交资料'
				break;
		}
	}

	const submit = async () => {

		await formRef.value.validate()
		if (!model.brand_logo) return uni.$uv.toast('请上传品牌LOGO')
		if (!model.merchant_background_img) return uni.$uv.toast('请上传商家背景图')
		if (!model.business_license_url) return uni.$uv.toast('请上传营业执照')
		if (!model.community_id) return uni.$uv.toast('请选择小区')
		if (checkbox.value.length === 0) return uni.$uv.toast('请先同意协议')
		uni.showLoading({
			title: '提交中',
			mask: true
		})
		const res = await joinMerchant(model)
		buttonText.value = '等待审核'
		uni.hideLoading()
		uni.$uv.toast('提交成功')
	}

	const getClassify = async () => {
		const {
			result
		} = await getMerchantClassify()
		const arr = result.map(e => ({
			label: e.cate_name,
			id: e.id
		}))
		classif.value = [arr]
	}

	getClassify()


	const joinDetail = async () => {
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		const {
			result
		} = await joinMerchantDetail()
		if (!result.id) return uni.hideLoading()
		checkbox.value = [1]
		model.id = result.id
		model.contacts = result.contacts
		model.contacts_tel = result.contacts_tel
		model.merchant_name = result.merchant_name
		model.merchant_classify = result.merchant_classify
		model.merchant_address = result.merchant_address
		model.merchant_profile = result.merchant_profile
		model.is_consular_alliance = result.is_consular_alliance
		model.brand_logo = result.brand_logo
		model.merchant_background_img = result.merchant_background_img
		model.business_license_url = result.business_license_url
		model.community_province_id = result.community_province_id
		model.community_city_id = result.community_city_id
		model.community_area_id = result.community_area_id
		model.community_town_id = result.community_town_id
		model.community_id = result.community_id
		community.value = result.community_address
		merchant_classify.value = result.category_name

		approvedReason.value = result.approved_reason
		approvedStatus.value = result.approved_status
		setStatus()
		uni.hideLoading()
	}

	joinDetail()
</script>

<style>
	page {
		background-color: #F6F4F7;
	}
</style>

<style lang="scss" scoped>
    .approved-reason {
		padding: 30upx;
		box-sizing: border-box;
		font-size: 24upx;
		color: #666;
	}

	.merchant {
		position: relative;

		.bg {
			top: 0;
			z-index: 1;
			width: 100%;
			position: absolute;
		}

		.content {
			z-index: 2;
			padding: 30rpx;
			box-sizing: border-box;
			position: relative;
		}

		.citySelect {
			height: calc(100vh - var(--window-top));
		}
	}

	.form {
		padding: 30rpx 50rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.form1 {
		padding: 30rpx 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.form2 {
		padding: 0 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}

	.item {
		width: 100%;
		display: flex;
		overflow: hidden;
		border-radius: 10rpx;
		padding-top: 40rpx;
		padding-bottom: 30rpx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		background-color: #F7F5F8;

		image {
			width: 100%;
			display: block;
			margin: 0 auto;
			margin-bottom: 20rpx;
		}
	}

	.btn {
		color: #fff;
		width: 100%;
		height: 100rpx;
		z-index: 110;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		box-sizing: border-box;
		background-color: #D32D26;
	}

	.checkbox {
		::v-deep .uv-checkbox {
			margin: 0 auto;
			margin-bottom: 16rpx;
		}
	}
</style>